<!DOCTYPE html>
<head>
    <title>Spring cloud 练习任务</title>
    <meta charset="UTF-8">
</head>
<body>
<div>
    <table>
        <thead>
        <tr>
            <th>姓名</th>
        </tr>
        </thead>
        <tbody id="data-table">
        </tbody>
    </table>
</div>
<div id="detail" style="position: absolute;
    width: 100px;
    height: 100px;
    display: inline-block;
    left: 200px;
    top: 200px;">

</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    function getAllEmployees() {
        let tbody = document.getElementById("data-table");
        let detail = document.getElementById("detail");
        $.ajax({
            type: "GET",
            url: "http://localhost:8769/emps/employee/list",
            success: function (result) {
                let html = "";
                for (let i = 0; i < result.length; i++) {
                    html += "<tr onclick='clickName(" + result[i].employeeId + ")'><td>" + result[i].lastName + " - " + result[i].firstName + "</td></tr>"
                }
                tbody.innerHTML = html;
            }
        });
    }

    function clickName(id) {
        $.ajax({
            type: "GET",
            url: "http://localhost:8769/emps/employee/"+id,
            success: function (result) {
                let html = "JOB: " + result.jobId + "----" + result.jobInfo.jobTitle;
                detail.innerHTML = html;
            }
        });
    }

    getAllEmployees();

</script>
</html>